﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link href="src/css/rayui.css" rel="stylesheet" />
    <title></title>
    <style>
        body {
            padding: 20px;
            margin: 0;
        }

        .pagebtn {
            width: 100%;
            padding: 20px 0;
            margin: -5px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>

    <h2 class="text-center">欢迎来到Rayui前端框架</h2>

    <h4>rayui组件</h4>


    <script>

        var str = " +/?&%#=";
        var enstr = encodeURI(str);
        console.log(enstr);
    </script>


    <div class="row text-center">
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/table.html" target="_blank">table</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/layer.html" target="_blank">layer</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/tree.html" target="_blank">tree</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/select.html" target="_blank">select</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/selecttree.html" target="_blank">selecttree</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/treegrid.html" target="_blank">treegrid</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/checkbox.html" target="_blank">checkbox</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/radiobtn.html" target="_blank">radiobtn</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/swich.html" target="_blank">swich</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/form.html" target="_blank">form</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/calender.html" target="_blank">calender</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/code.html" target="_blank">code</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/tab.html" target="_blank">tab</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/navbar.html" target="_blank">navbar</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/progress.html" target="_blank">progress</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/lazy.html" target="_blank">lazy</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/ringbtn.html" target="_blank">ringbtn</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/color.html" target="_blank">color</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/template.html" target="_blank">template</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/page.html" target="_blank">page</a>
        </div>


        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/elem.html" target="_blank">elem</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/loadingbtn.html" target="_blank">loadingbtn</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/timerbtn.html" target="_blank">timerbtn</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/formjs.html" target="_blank">formjs</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/validate.html" target="_blank">validate</a>
        </div>
        <div class="col-sm-2 col-xs-4">
            <a class="rayui-btn btn-default pagebtn" href="example/timeline.html" target="_blank">timeline</a>
        </div>
    </div>
    <br />
    <br />

    <h3 class="spliter">说明</h3>
    <div class="card">Rayui的组件还很少，正在逐步完善……</div>
    <div class="card">还没有适配手机端，建议在电脑上访问</div>
    <div class="card card-color-orange">Rayui还没有开发完成，目前已经公开源代码，<a href="https://gitee.com/Ray3390/Rayui?_from=gitee_search" target="_blank">欢迎下载</a>，如有疑问欢迎联系QQ869055297<i class="ra ra-smile" style="color: #5cb85c"></i>。也希望各位大神能指点一二</div>
    <br />

    <h3 class="spliter">加载使用，<a href="example/start.html" target="_blank">详细说明</a></h3>
    <div class="card">
        <p>
            1、加载方式参照的layui的设计，采用模块加载。
        </p>
        <p>
            2、为了兼顾以前的开发方式还增加了一种加载方式，script标签直接添加use加载组件，例如：
            &lt;script src="../src/js/rayui.js" use="form,select,checkbox,swich">&lt;/script>，此时不必再写繁琐的use函数，直接rayui.ready(function(){//你的代码})，rayui.ready的实现是在jquery.ready的基础上实现的，所以此时dom已经加载完毕，
            代码里没有必要再嵌入一级$(function(){})了，不过嵌入也没关系^-^
        </p>
    </div>
    <br />

    <h3 class="spliter">开发参照</h3>
    <div>
        <p>1、<a target="_blank" href="https://www.layui.com">layui--经典模块化前端框架<img src="images/hot.gif" /></a></p>
        <p>2、<a target="_blank" href="http://www.bootcss.com">Bootstrap--简洁、直观、强悍的前端开发框架</a></p>
        <p>3、<a target="_blank" href="http://fontawesome.dashgame.com">Font Awesome--一套绝佳的图标字体库和CSS框架</a></p>
        <p>4、<a target="_blank" href="http://www.jeasyui.com">EasyUI--EasyUI framework helps you build your web pages easily</a></p>
        <p>5、<a target="_blank" href="http://www.treejs.cn/v3/main.php">zTree--zTree 是一个依靠 jQuery 实现的多功能 “树插件”</a></p>
        <p>6、<a target="_blank" href="http://validform.club/">Validform 表单验证的完美解决方案</a></p>
    </div>
</body>
</html>